<template>
    <div class="main">
        <van-nav-bar
            title="心语签详细信息"
            left-text="返回"
            left-arrow
            @clickLeft="$emit('close')"
            :safe-area-inset-top="false"
        >
            <van-icon name="search" slot="left" />
        </van-nav-bar>

        <!-- 心语签的隐藏信息的编辑 -->

        <van-field
            :value="content.title"
            label="标题"
            @change.native="changeInfo($event, 'title')"
        />
        <van-field
            :value="content.description"
            label="心语"
            @change.native="changeInfo($event, 'description')"
        />
        <van-field
            :value="content.please"
            label="祝福语"
            @change.native="changeInfo($event, 'please')"
        />
        <van-field
            :value="content.belongTo"
            label="归属章节"
            @change.native="changeInfo($event, 'belongTo')"
        />
        <van-cell title="发布时间">
            <div slot="right-icon" @click="$emit('selectTime')">{{ time }}</div>
        </van-cell>
        <van-cell title="图片" :use-label-slot="true">
            <van-button slot="label" type="primary" @click="replaceImage"
                >替换图片</van-button
            >
            <image
                v-if="content.image"
                slot="right-icon"
                :src="content.image"
                class="image"
                @click="preview"
            >
                <text slot="error">加载失败</text>
            </image>
            <div
                v-if="!content.image"
                slot="right-icon"
                class="image row material-icons-outlined"
            >
                add_photo_alternate
            </div>
        </van-cell>
    </div>
</template>

<script>
import $store from "@/store/index.js";
import vanField from "@/wxcomponents/weapp/dist/field/index";
import { pictureChoose } from "@/utils/pictureChoose.js";
import vanNavBar from "@/wxcomponents/weapp/dist/nav-bar/index";
export default {
    components: { vanField, vanNavBar },
    props: ["content"],
    computed: {
        time() {
            const date = new Date(this.content.date);
            return `${date.getFullYear()}-${
                date.getMonth() + 1
            }-${date.getDate()}`;
        },
    },
    data() {
        return {};
    },
    mounted() {
        console.log(this.content);
    },
    methods: {
        changeInfo(event, keyName) {
            $store.commit("changeEditingXin", { [keyName]: event.detail });
        },
        preview() {
            wx.previewImage({ urls: [this.content.image] });
        },
        replaceImage() {
            pictureChoose().then((url) => {
                $store.commit("changeEditingXin", { image: url });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.main {
    position: relative;
    height: 80%;
    width: 80%;
    background-color: #fafafa;
    border-radius: 32rpx;
    overflow: hidden;
}
.close {
    position: absolute;
    border-radius: 50%;
    right: 16rpx;
    top: 16rpx;
}
.image {
    height: 200rpx;
    width: 200rpx;
    background-color: #fafafa;
}
</style>